'use client';

import { useParams } from 'next/navigation';
import { useRef } from 'react';

import MarketplaceProjectProvider, {
  useMarketplaceProject,
} from '@/components/marketplace/project/MarketplaceProjectProvider';
import MarketplaceProjectSidebar from '@/components/marketplace/project/MarketplaceProjectSidebar';
import MarketplaceProjectTopBar from '@/components/marketplace/project/MarketplaceProjectTopBar';
import MarketplaceWaveformChat from '@/components/marketplace/project/MarketplaceWaveformChat';
import ProjectApplicationModal from '@/components/marketplace/shared/modal/ProjectApplicationModal';

const MarketplaceProjectPageContent = () => {
  const params = useParams();
  const projectId = params.projectId as string;

  // Get modal state and project data from provider
  const {
    showApplicationModal,
    setShowApplicationModal,
    checkUserApplication,
  } = useMarketplaceProject();

  const messagesContainerRef = useRef<HTMLDivElement>(null);

  return (
    <div className='flex min-h-screen w-full bg-background-primary'>
      {/* Main Chat Area */}
      <div className='flex flex-1 flex-col'>
        <MarketplaceProjectTopBar />

        {/* Chat Messages */}
        <div ref={messagesContainerRef} className='flex-1 overflow-y-auto'>
          <MarketplaceWaveformChat />
        </div>
      </div>

      {/* Fixed Project Details Card */}
      <MarketplaceProjectSidebar />

      {/* Application Modal */}
      <ProjectApplicationModal
        projectId={projectId}
        isOpen={showApplicationModal}
        onClose={() => setShowApplicationModal(false)}
        onApplicationSubmitted={() => {
          // Refresh project data and user application status when application is submitted
          checkUserApplication();
        }}
      />
    </div>
  );
};

const MarketplaceProjectPage = () => {
  const params = useParams();
  const projectId = params.projectId as string;

  return (
    <MarketplaceProjectProvider projectId={projectId}>
      <MarketplaceProjectPageContent />
    </MarketplaceProjectProvider>
  );
};

export default MarketplaceProjectPage;